import { ref, Ref, onUnmounted } from 'vue'; // , onMounted
// import * as echarts from 'echarts/core';

/**
 * eChart hook
 * @param domId
 * @param chart
 */
/*
export const useChart = (domId: string): Ref<echarts.ECharts> => {
	let chartContainer: HTMLCanvasElement;
	const selfChart = ref<echarts.ECharts | any>();
	const updateContainer = () => {
		// resize 报错，响应式的问题，待处理
		selfChart.value.resize({
			width: chartContainer.clientWidth,
			height: chartContainer.clientHeight,
		});
	};

	onMounted(() => {
		if (!chartContainer) {
			chartContainer = document.getElementById(domId) as HTMLCanvasElement;
		}
		selfChart.value = echarts.init(chartContainer);
	});

	window.addEventListener('resize', updateContainer, false);

	onUnmounted(() => {
		window.removeEventListener('resize', updateContainer);
	});

	return selfChart;
};
*/

/**
 * counter utils
 * @param duration
 * @returns
 */
export const useCounter = (duration = 60): [Ref<number>, () => void] => {
	let intervalTimer;
	onUnmounted(() => {
		clearInterval(intervalTimer);
	});
	const countDown = ref(0);

	return [
		countDown,
		() => {
			countDown.value = duration;
			intervalTimer = setInterval(() => {
				if (countDown.value > 0) {
					countDown.value -= 1;
				} else {
					clearInterval(intervalTimer);
					countDown.value = 0;
				}
			}, 1000);
		},
	];
};
